<template>
  <div class="perInfo">
    <h2>
      <span>个人信息</span>
      <Button icon="edit" class="edit" :class="{editActive:!isActive}" @click="editCheck(false)">编辑</Button>
    </h2>
    <div class="userInfo" :class="{editActive:!isActive}">
      <Row type="flex" justify="center" align="middle">
        <Col span="6">
        1</Col>
        <Col span="18">
        <Row type="flex" class="rowPad">
          <Col span="6">
          账号</Col>
          <Col span="18" class="textL">
          {{userNameInfo}}</Col>
        </Row>
        <Row type="flex" class="rowPad">
          <Col span="6">
          昵称</Col>
          <Col span="18" class="textL">
          {{nickNameInfo}}</Col>
        </Row>
        <Row type="flex" class="rowPad">
          <Col span="6">
          联系电话</Col>
          <Col span="18" class="textL">
          {{phoneInfo}}</Col>
        </Row>
        <Row type="flex" class="rowPad">
          <Col span="6">
          简介</Col>
          <Col span="18" class="textL">
          {{introInfo}}</Col>
        </Row>
        </Col>
      </Row>
    </div>
    <!--edit-->
    <div class="editInfo" :class="{editActive:isActive}">
      <Row type="flex" justify="center" align="middle">
        <Col span="6">
        1</Col>
        <Col span="18">
        <Row type="flex" class="rowPad">
          <Col span="6">
          账号</Col>
          <Col span="18" class="textL">
          <Input v-model="userName" disabled placeholder=""></Input>
          </Col>
        </Row>
        <Row type="flex" class="rowPad">
          <Col span="6">
          昵称</Col>
          <Col span="18" class="textL">
          <Input v-model="nickName" placeholder="default size"></Input>
          </Col>
        </Row>
        <Row type="flex" class="rowPad">
          <Col span="6">
          联系电话</Col>
          <Col span="18" class="textL">
          <Input v-model="phone" placeholder="default size"></Input>
          </Col>
        </Row>
        <Row type="flex" class="rowPad">
          <Col span="6">
          简介</Col>
          <Col span="18" class="textL">
          <Input v-model="intro" type="textarea" placeholder="Enter something..."></Input>
          </Col>
        </Row>

        </Col>
      </Row>
      <Row type="flex" class="rowPad">
        <Col span="18" class="textR">
        <Button type="ghost" @click="queryInfo()">查询</Button>
        <Button type="ghost" @click="editCheck(true)">返回</Button>
        </Col>
        <Col span="6" class="">
        <Button type="primary" @click="addInfo">保存修改</Button>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../router/api'

  export default {
    data() {
      return {
        isActive: true,
        userName: '',
        nickName: '',
        phone: '',
        intro: '',

        userNameInfo: '',
        nickNameInfo: '',
        phoneInfo: '',
        introInfo: '',
      }
    },
    methods: {
      editCheck(val){
        let $this = this;
        $this.isActive = val;
      },
      queryInfo(){
        let $this = this;
        let params = {userName: "admin"};
        $this.$get($this, api.getInfo, params)
          .then(function (res) {
            $this.$Message.info(res.message);
            $this.userNameInfo = res.data.userName;
            $this.nickNameInfo = res.data.nickName;
            $this.phoneInfo = res.data.phone;
            $this.introInfo = res.data.intro;
          })
      },
      addInfo(){
        let $this = this;
        let params = {
          userName: "admin",
          nickName: $this.nickName,
          phone: $this.phone,
          intro: $this.intro,
        };
        $this.$post($this, api.addInfo, params)
          .then(function (res) {
            $this.$Message.info(res.message);
          })
      }
    },
    mounted(){
      this.queryInfo();
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  @import "../../common/less/common";

  .perInfo {
    padding: 20px;
    h2 {
      font-size: @font24;
      padding: 10px 15px;
      border-bottom: 1px solid @color_dd;
      .edit {
        float: right;
        margin-right: 40%;
      }
      &:after {
        content: '';
        display: block;
        clear: both;
        zoom: 1;
      }
    }
    .userInfo, .editInfo {
      width: 60%;
      padding: 10px;
      font-size: @font14;
      /*<!--background-color: @color_dd;-->*/
      text-align: center;
      .textL {
        color:@color_black;
        text-align: left;
      }
      .textR {
        text-align: right;
      }
      .rowPad {
        color:@color_83;
        padding-bottom: 10px;
        line-height: 34px;
      }

    }
    .editActive {
      display: none;
    }
  }
</style>
